/* ====================================
   Common Styles - Shared across all pages
   ==================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Oswald:wght@500;700&display=swap');

/* ====================================
   CSS Variables (Custom Properties)
   ==================================== */
:root {
    /* Colors */
    --background: #242531;
    --font-white: #fff;
    --black-color: #000000;
    --color-gray: #8b8a8a;
    --border: #fff 1px solid;
    
    /* White Variations */
    --white-pure: #fff;
    --white-bg: #FFFFFF;
    --white-transparent: rgba(255, 255, 255, 0);
    --white-semi: rgba(255, 255, 255, 0.67);
    --white-light: rgba(255, 255, 255, 0.54);
    --white-lighter: rgba(255, 255, 255, 0.78);
    --white-lightest: rgba(255, 255, 255, 0.8);
    
    /* Gray Variations */
    --gray-light: #cccccc;
    --gray-medium: #888;
    --gray-dark: #555;
    --gray-border: rgb(223, 221, 221);
    --gray-bg: #f1f1f1;
    --gray-bg-alt: rgb(245, 243, 243);
    --gray-text: rgb(150, 150, 135);
    --gray-text-medium: rgb(163, 146, 146);
    --gray-text-dark: rgb(95, 88, 88);
    --gray-muted: rgb(138, 134, 134);
    --gray-subtle: #5f5858;
    --gray-scrollbar: #F5F5F5;
    
    /* Shadow Colors */
    --shadow-blue: #bbcbd8;
    --shadow-light: rgba(0, 0, 0, 0.24);
    --shadow-medium: var(--shadow-medium);
    --shadow-dark: rgba(50, 50, 93, 0.25);
    
    /* Accent Colors */
    --red-error: #c71c1c;
    --red-warning: rgb(228, 72, 72);
    
    /* Fonts */
    --font-main: 'Montserrat', sans-serif;
    --font-oswald: 'Oswald', sans-serif;
    --a-font: #C1C2CE;
    --li-font: #d8d9e4;
    
    /* Font Sizes */
    --h2-font: 50px;
    --h3-font: 34px;
    --h4-font: 32px;
    --h5-font: 24px;
    --p-font: 15px;
    --small-font: 0.7rem;
}

/* ====================================
   Global Reset
   ==================================== */
* {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--background);
    color: var(--font-white);
    overflow-x: hidden;
}

/* ====================================
   Common Typography
   ==================================== */
h1 {
    color: var(--font-white);
    font-size: 112px;
}

h2 {
    font-weight: bold;
    letter-spacing: 3px;
    font-size: var(--h2-font);
    padding-bottom: 2.5rem;
    margin-left: 0;
}

h3 {
    font-size: var(--h3-font);
    padding-bottom: 2rem;
    color: var(--font-white);
}

h4 {
    font-size: var(--h4-font);
    cursor: pointer;
    color: var(--a-font);
    margin-bottom: 2rem;
    transition: 0.3s ease-in-out;
    width: fit-content;
}

h4:hover {
    color: var(--font-white);
}

h5 {
    font-size: var(--h5-font);
    color: var(--font-white);
    margin-bottom: 1.4rem;
    font-weight: 400;
}

p {
    font-size: var(--p-font);
    letter-spacing: 1px;
    padding-bottom: 2rem;
    color: var(--font-white);
}

/* ====================================
   Common Links
   ==================================== */
a {
    color: var(--a-font);
    text-decoration: none;
    transition: 0.2s;
    cursor: pointer;
}

a:hover {
    color: var(--font-white);
}

a.link_arrow:before {
    content: '\00BB ';
}

a.link_arrow {
    color: var(--black-color);
    border-bottom: none !important;
    text-decoration: underline !important;
    text-decoration-color: var(--gray-light);
    text-decoration-style: dotted !important;
}

a.link_arrow:hover {
    text-decoration: none;
}

/* ====================================
   Common Lists
   ==================================== */
ul li {
    list-style: none;
}

/* ====================================
   Common Sections
   ==================================== */
section {
    height: fit-content;
    margin-bottom: 10rem;
    color: var(--font-white);
}

.section-responsive {
    position: relative;
    margin: 0 auto;
    width: 1070px;
}

.section-header {
    height: 100vh;
}

.section-small {
    height: 0;
    border: solid transparent;
}

.section-small-2 {
    margin-bottom: 0;
}

/* ====================================
   Navbar (Common to all pages)
   ==================================== */
.navbar {
    position: absolute;
    background-color: transparent;
    height: 6.5rem;
    width: 100%;
    z-index: 999;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: 0.5s ease-in-out;
}

.navbar:hover {
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(18px);
}

.navbar-inner {
    position: relative;
    width: 100%;
    margin: auto;
    height: 5rem;
}

.navbar-inner:hover {
    cursor: default;
}

.cross {
    opacity: 0;
    z-index: -5;
}

#navbar {
    align-items: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
}

.logo-navbar {
    position: absolute;
    cursor: pointer;
    height: 5rem;
    left: 1.5rem;
}

.logo-navbar img {
    height: 100%;
}

#navbar li {
    margin-right: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    height: fit-content;
}

#navbar li i {
    font-size: 1rem;
    color: var(--a-font);
}

#navbar li i:hover {
    color: var(--font-white);
}

#navbar .language a {
    margin-right: 0.3rem;
}

/* Social Media List */
.socialmedia li {
    display: inline-block;
    margin-left: 1rem;
    position: relative;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

#socialmedia li {
    width: 2.9rem;
    height: 2.9rem;
    border: solid 1px;
    border-radius: 3rem;
}

.socialmedia li:first-child {
    margin-left: 0;
}

#socialmedia li:hover {
    background-color: var(--font-white);
}

#portfolio-more {
    position: absolute;
    width: 100%;
    top: 2rem;
    height: 100%;
}

#search-more {
    position: absolute;
    top: 0;
    opacity: 0;
    width: 37rem;
    height: 6rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow-y: hidden;
}

#search-more input {
    width: 100%;
    height: 70%;
    background-color: transparent;
    color: var(--white-pure);
    font-size: 2.5rem;
    border: none;
    border-bottom: var(--border);
    -webkit-appearance: none;
}

input:focus {
    outline: none !important;
}

.more-position {
    position: relative;
    margin: auto;
    width: 920px;
    height: 17rem;
    overflow-y: hidden;
}

.navbar_footer {
    width: 100%;
    position: relative;
    border-top: var(--border);
    height: 7rem;
    overflow-y: hidden;
}

.navbar_footer_inner {
    position: relative;
    width: 650px;
    margin: auto;
    height: 100%;
    padding-top: 2.5rem;
}

.socialmedia-navbar {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.socialmedia-navbar li {
    margin-right: 2rem;
}

.socialmedia-navbar i {
    font-size: 1.2rem;
    position: relative;
    top: 0.2rem;
}

.socialmedia-navbar i:hover {
    color: var(--font-white);
}

.portfolio-more-inner {
    position: absolute;
    left: 15rem;
    height: calc(9rem - 0.7rem);
    width: 30rem;
    top: 0.7rem;
}

.portfolio-inner {
    position: absolute;
    top: 0;
}

#portfolio-inner-1 {
    opacity: 1;
    z-index: 1;
}

#portfolio-inner-2 {
    opacity: 0;
    z-index: -1;
}

.portfolio-inner {
    display: grid;
    gap: 0;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    left: 5%;
}

.link {
    width: 9rem;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    height: fit-content;
}

.navbar a {
    color: var(--white-light);
}

.navbar a:hover {
    color: var(--white-pure);
}

.portfolio-more h4 {
    color: var(--white-semi);
    transition: 0s;
}

.portfolio-more h4:hover {
    color: var(--white-lighter);
}

.socialmedia-navbar li a {
    color: var(--white-lightest);
}

.socialmedia-navbar li a:hover {
    color: var(--white-pure);
}

.see_more_destinations {
    border-top: var(--border);
    padding-left: 0.1rem;
    padding-top: 0.4rem;
    color: var(--white-light);
    height: 20rem;
    width: 26rem;
    position: absolute;
    left: 1rem;
    top: calc(100% + 4rem);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    font-size: 0.77rem;
}

/* ====================================
   Mobile Navbar (Common to all pages)
   ==================================== */
.hamburger {
    display: none;
}

/* Navbar Mobile */
.navbar-all {
    position: fixed;
    top: 0;
    opacity: 0;
    z-index: -5;
    height: 100vh;
    right: -60rem;
    width: 50rem;
    z-index: 99999999999;
    overflow-y: hidden;
    overflow-x: visible;
    background-color: var(--background);
    transition: 0.3s ease-in-out;
}

.navbar-mobile {
    overflow: hidden;
    height: 99%;
    width: 20rem;
    box-shadow: inset 0 0 10px #000000;
}

#ul-navbar-portfolio {
    max-height: 89%;
    overflow: scroll;
}

#ul-navbar-portfolio::-webkit-scrollbar {
    width: 5px;
}

#ul-navbar-portfolio::-webkit-scrollbar-track {
    background: var(--background);
}

#ul-navbar-portfolio::-webkit-scrollbar-thumb {
    background: var(--font-white);
}

.ul-navbar-mobile li {
    display: list-item;
    position: relative;
    border-bottom: solid black 0.4px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 0.5px 1px;
    padding: 1.1rem 0;
    padding-left: 2rem;
    list-style-type: decimal;
    text-transform: uppercase;
    color: var(--a-font);
    font-size: 12px;
}

.navbar-mobile input {
    width: 95%;
    height: 3.5rem;
    background-color: transparent;
    color: var(--white-pure);
    padding-left: 1rem;
    font-size: 0.99rem;
    letter-spacing: 1.6px;
    border: none;
    border-bottom: var(--border);
    -webkit-appearance: none;
}

.navbar-mobile ::placeholder {
    color: var(--white-light);
    font-size: 0.9rem;
}

.arrow-right {
    border-top: 2px solid;
    border-right: 2px solid;
    position: absolute;
    right: 1rem;
    top: 1.4rem;
    width: 0.4rem;
    height: 0.4rem;
    transform: rotate(45deg);
}

.navbar-mobile i {
    font-size: 1.3rem;
}

.extra {
    position: absolute;
    top: 7rem;
    left: 50%;
    transition: 0.3s ease-out;
    width: 20rem;
    background-color: var(--background);
    z-index: 999;
    height: 100%;
    overflow-y: hidden;
}

.navbar-heading {
    position: absolute;
    top: 3.2rem;
    left: 50%;
    height: 2rem;
    transition: 0.01s ease-in-out;
    border-bottom: solid 0.2px black;
    padding-top: 1.2rem;
    padding-left: 1.8rem;
    padding-bottom: -1rem;
    width: 18.2rem;
    background-color: var(--background);
    font-size: 0.84rem;
    z-index: 9999;
    text-transform: uppercase;
    cursor: pointer;
}

.extra-more {
    margin-top: 3.2rem;
    overflow-y: scroll;
    overflow-x: hidden;
}

.extra-more::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px var(--shadow-medium);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.extra-more::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
}

.extra-more::-webkit-scrollbar-thumb {
    border-radius: 0;
    box-shadow: inset 0 0 6px rgba(228, 79, 79, 0.3);
    background-color: gray;
}

.ul-second li {
    font-size: 0.76rem;
    padding-left: 2rem;
    text-transform: capitalize;
}

.extra-more li {
    font-size: 0.76rem;
    padding-left: 3.5rem;
    text-transform: capitalize;
}

.back {
    position: relative;
    padding: 0.9rem 0;
    padding-left: 74%;
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
}

.back tt {
    left: 0.7rem;
    top: -0.15rem;
    position: relative;
    color: var(--a-font);
}

.arrow-left {
    border-bottom: 2px solid;
    border-left: 2px solid;
    position: absolute;
    width: 0.4rem;
    top: 1rem;
    height: 0.4rem;
    transform: rotate(45deg);
}

/* ====================================
   Footer (Common to all pages)
   ==================================== */
#section-footer {
    border-top: var(--border);
    padding-top: 1rem;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 2rem;
    margin-top: 6rem;
}

.container-footer {
    display: grid;
    height: fit-content;
    width: 100%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "menu_ social_"
        "bottom_ bottom_";
}

.element2_ {
    height: fit-content;
    text-align: center;
    margin-bottom: 20px;
}

#content1_ {
    grid-area: menu_;
    width: 100%;
}

#content1_ #home {
    font-size: 1.8rem;
    top: 0.1rem;
    width: fit-content;
    cursor: pointer;
}

#content1_ .fa-chevron-right {
    font-size: 1.3rem;
    top: 0.4rem;
    position: relative;
    cursor: default;
}

#content1_ li a {
    position: relative;
    margin: 0;
    top: 0;
}

#content1_ li {
    height: 2rem;
    line-height: 2rem;
    padding: 0;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    width: fit-content;
    position: relative;
}

#content1_ #home {
    color: rgb(221, 212, 212);
}

#content1_ #home:hover {
    color: white;
}

#content1_ ul {
    list-style-type: none;
}

#content1_ ul li {
    float: left;
    display: block;
}

#content2_ {
    grid-area: social_;
}

#content2_ ul {
    list-style-type: none;
    float: right;
}

#content2_ ul li {
    float: left;
    margin-left: 1.5rem;
    border: var(--border);
    height: 3.2rem;
    width: 3.2rem;
    text-align: center;
    transition: 0.2s ease-in-out;
    border-radius: 50%;
}

#content2_ ul li i {
    font-size: 1.5rem;
    line-height: 3.2rem;
    position: relative;
    transition: 0.2s ease-in-out;
}

#content2_ ul li:hover {
    background-color: var(--white-pure);
}

#content2_ ul li:hover i {
    color: var(--background);
}

#content3_ {
    grid-area: bottom_;
    position: relative;
    width: 100%;
    left: 0%;
}

.link-footer {
    color: var(--font-white);
}

#section-footer #socialmedia li {
    border: var(--border);
}

#section-footer #socialmedia li i {
    line-height: 2.7rem;
}

/* ====================================
   Scroll To Top Button (Common)
   ==================================== */
.scrollToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99999999;
    border: none;
    outline: none;
    background-color: var(--background);
    color: white;
    cursor: pointer;
    border-radius: 50%;
    height: 3.4rem;
    width: 3.4rem;
    transition: 0.2s ease-in-out;
    border: var(--border);
}

.scrollToTop:hover {
    /* NO background-color change! */
}

.arrowup {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow_up {
    height: 1.2rem;
    width: 1.2rem;
    top: 0.32rem;
    position: relative;
    border: var(--border);
    transform: rotate(45deg);
    border-right: none;
    border-bottom: none;
}

.arrowup:hover .arrow_up {
    animation-name: arrow;
    transition: ease-in-out;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes arrow {
    50% {
        top: 0;
    }
    80% {
        top: 0.28rem;
    }
}

/* ====================================
   Background Layers (Common)
   ==================================== */
.backgroundlayer {
    top: 0;
    height: 15rem;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
    z-index: 99;
    position: relative;
}

.backgroundlayer1 {
    height: 50%;
    width: 100%;
    position: relative;
    background-image: linear-gradient(to bottom, var(--background), rgba(255, 255, 255, 0));
}

.backgroundlayer2 {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
    position: relative;
    height: 47%;
    width: 100%;
}

.backgroundlayer2_ {
    height: 150vh;
    top: 0;
    position: absolute;
    width: 35%;
    right: 10%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--background));
}

.backgroundoverflow {
    height: 60rem;
    background-color: var(--background);
}

.layer {
    top: 5rem;
    position: absolute;
    opacity: 1;
    width: 100%;
    top: 70vh;
}

/* ====================================
   Trip Info Styles (Common)
   ==================================== */
.tripinfo_title {
    visibility: hidden;
    height: 0;
}

.tripinfo_untertitle {
    color: var(--color-gray);
    font-size: 1.8rem;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 7px;
}

.tripinfo_paragraph {
    color: var(--black-color);
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: justify;
    padding-bottom: 5px;
    text-indent: 48px;
}

.tripinfo_paragraph > strong,
.tripinfo_paragraph > b {
    font-weight: 600;
    color: var(--color-gray);
}

.tripinfo_paragraph > ul > li > strong,
.tripinfo_paragraph > ul > li > b {
    font-weight: 600;
    color: var(--color-gray);
}

.tripinfo_paragraph > i {
    font-style: italic;
    color: var(--black-color);
}

.tripinfo_paragraph > ul > li > i {
    font-style: italic;
    color: var(--black-color);
}

.tripinfo_paragraph > ul > li {
    list-style: square inside;
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
    margin-left: 48px;
    text-align: left;
}

/* ====================================
   Owl Carousel (Common)
   ==================================== */
.owl-controls .owl-buttons {
    text-align: center;
    margin-top: 20px;
}

.owl-controls .owl-buttons .owl-prev {
    background: #fff;
    position: absolute;
    top: 45%;
    left: -1rem;
    padding: 0 18px 0 15px;
    border-radius: 50px;
    box-shadow: 3px 14px 25px -10px #92b4d0;
    transition: background 0.5s ease 0s;
}

.owl-controls .owl-buttons .owl-next {
    background: #fff;
    position: absolute;
    top: 45%;
    right: -1rem;
    padding: 0 15px 0 18px;
    border-radius: 50px;
    box-shadow: -3px 14px 25px -10px #92b4d0;
    transition: background 0.5s ease 0s;
}

.owl-controls .owl-buttons .owl-prev:after,
.owl-controls .owl-buttons .owl-next:after {
    content: "\f104";
    font-family: FontAwesome;
    color: var(--background);
    font-size: 30px;
}

.owl-controls .owl-buttons .owl-next:after {
    content: "\f105";
}

/* ====================================
   Common Media Queries
   ==================================== */
@media screen and (max-width: 1300px) {
    .backgroundlayer2_ {
        right: 0%;
        width: 40%;
    }
}

@media screen and (max-width: 900px) {
    .section-responsive {
        width: 95%;
    }
}

@media screen and (max-width: 800px) {
    .container-footer {
        grid-template-columns: 1fr;
        grid-template-rows: 0.7fr 1.5fr 0.45fr;
        gap: 0;
        grid-template-areas:
            "menu_"
            "social_"
            "bottom_";
    }
    
    #content2_ ul {
        float: left;
    }
    
    #content2_ ul li {
        margin-right: 1.5rem;
        margin-left: 0;
    }
}

/* Replace the entire @media (max-width: 1000px) section with original styles */

@media screen and (max-width: 872px) {
    #navbar {
        position: fixed;
        top: -14rem;
        opacity: 0;
    }
    
    .hamburger {
        display: block;
        height: fit-content;
        width: 2rem;
        opacity: 1;
        top: 0;
        position: absolute;
        right: 1rem;
        top: 1rem;
        cursor: pointer;
    }
    
    .cross {
        height: fit-content;
        width: 2rem;
        font-size: 2rem;
        opacity: 1;
        top: 0;
        position: absolute;
        right: 1rem;
        opacity: 0;
        z-index: -1;
        top: 1rem;
        cursor: pointer;
    }
    
    .cross2 {
        height: fit-content;
        width: 2rem;
        font-size: 2rem;
        opacity: 1;
        top: 0;
        position: absolute;
        right: 21rem;
        transition: 0.3s ease-in-out;
        opacity: 0;
        z-index: -1;
        top: 1rem;
        cursor: pointer;
    }
    
    .hamburger-inner {
        border: solid 2.8px;
        background-color: var(--white-pure);
        position: relative;
        margin-top: 0.3rem;
    }
    
    .navbar-all {
        z-index: 99999999999;
        opacity: 1;
    }
}

/* ====================================
   Footer Responsive
   ==================================== */
@media screen and (max-width: 800px) {
    .container-footer {
        grid-template-columns: 1fr;
        grid-template-rows: 0.7fr 1.5fr 0.45fr;
        gap: 0;
        grid-template-areas:
            "menu_"
            "social_"
            "bottom_";
    }
    
    #content2_ ul {
        float: left;
    }
    
    #content2_ ul li {
        margin-right: 1.5rem;
        margin-left: 0;
    }
}